<template>
  <div style="margin-top: 10px">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="search-card-title">
            Personal Information of {{ form.nickname }}</span
          >
          <el-col
            :span="6"
            :offset="16"
            style="text-align: end; padding-right: 10px"
          >
            <el-button
              size="medium"
              type="primary"
              icon="el-icon-s-fold"
              @click="returnTo()"
              >Back</el-button
            >
          </el-col>
        </div>
      </template>
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <span>
            <el-form :model="form" :rules="rules" ref="registerForm">
              <el-descriptions title="Role Information" border :column="2">
                <el-descriptions-item
                  :labelStyle="{ background: '#e1f3d8' }"
                  :contentStyle="{ background: '#FDE2E2' }"
                >
                  <template slot="label">
                    <i class="el-icon-user-solid"></i>
                    Nickname
                  </template>
                  <div v-if="isUpdate == false">{{ form.nickname }}</div>
                  <el-input
                    v-model="form.nickname"
                    v-if="isUpdate == true"
                  ></el-input>
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    Gender
                  </template>
                  <div v-if="isUpdate == false">{{ form.gender }}</div>
                  <el-input
                    v-model="form.gender"
                    v-if="isUpdate == true"
                  ></el-input>
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-star-on"></i>
                    Age
                  </template>
                  <div v-if="isUpdate == false">{{ form.age }}</div>

                  <el-form-item prop="age" v-if="isUpdate == true">
                    <el-input v-model="form.age"></el-input>
                  </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    Phone
                  </template>

                  <div v-if="isUpdate == false && form.phone != ''">
                    {{ form.phone }}
                  </div>
                  <div
                    v-if="isUpdate == false && form.phone == ''"
                    style="color: red"
                  >
                    This option is required
                  </div>
                  <el-form-item prop="phone" v-if="isUpdate == true">
                    <el-input v-model="form.phone"></el-input>
                  </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-chat-round"></i>
                    WeChat
                  </template>
                  <div v-if="isUpdate == false && form.wechat != ''">
                    {{ form.wechat }}
                  </div>
                  <div v-if="isUpdate == false && form.wechat == ''">
                    <el-button type="success" size="mini" @click="bindwc"
                      >Sweep Bind WeChat</el-button
                    >
                  </div>
                  <div v-if="isUpdate == true">{{ form.wechat }}</div>
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">QQ</template>
                  <div v-if="isUpdate == false">{{ form.qq }}</div>

                  <el-input
                    v-model="form.qq"
                    v-if="isUpdate == true"
                  ></el-input>
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-map-location"></i>
                    Address
                  </template>
                  <div v-if="isUpdate == false">{{ form.address }}</div>
                  <el-input
                    v-model="form.address"
                    v-if="isUpdate == true"
                  ></el-input>
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-message"></i>
                    Email
                  </template>
                  <div v-if="isUpdate == false && form.email != ''">
                    {{ form.email }}
                  </div>
                  <div
                    v-if="isUpdate == false && form.email == ''"
                    style="color: red"
                  >
                    This option is required
                  </div>
                  <el-form-item prop="email" v-if="isUpdate == true">
                    <el-input v-model="form.email"></el-input>
                  </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-date"></i>
                    Registration DateTime
                  </template>
                  {{ form.createTime }}
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-s-custom"></i>
                    Role
                  </template>
                  <el-tag size="medium">{{ form.role }}</el-tag>
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-star-off"></i>
                    Status
                  </template>
                  <el-tag size="medium" type="success">{{
                    form.status
                  }}</el-tag>
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-s-grid"></i>
                    Number of Questionnaires
                  </template>
                  <el-tag size="medium" type="warning">{{
                    form.questionnaireNum
                  }}</el-tag>
                </el-descriptions-item>
              </el-descriptions>
            </el-form>
          </span>
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col
          :span="6"
          :offset="18"
          style="text-align: end; padding-top: 10px; padding-right: 10px"
        >
          <el-button
            v-if="isUpdate == false"
            type="primary"
            size="mini"
            @click="isUpdate = true"
            >Modify</el-button
          >
          <el-button
            v-if="isUpdate == true"
            type="success"
            size="mini"
            @click="confirmModify()"
            >confirm</el-button
          >
          <el-button
            v-if="isUpdate == true"
            type="info"
            size="mini"
            @click="close()"
            >Cancel</el-button
          >
        </el-col>
      </el-row>
    </el-card>
    <el-dialog
      title="Bind the wechat account"
      :visible.sync="show"
      :append-to-body="true"
      width="20.5%"
    >
      <el-card class="box-card3"> 扫码绑定微信</el-card>
      <div>
        <el-card class="box-card2">
          <div style="margin-top: -55px">
            <wxlogin
              id="wxLoginForm"
              style="display: none"
              :appid="wechatLoginInfo.appid"
              :scope="wechatLoginInfo.scope"
              :redirect_uri="wechatLoginInfo.redirectUri"
              :state="wechatLoginInfo.state"
              :theme="'black'"
            ></wxlogin>
          </div>
        </el-card>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="show = false" size="mini">cancel</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import api from "@/api/api.js";
import cookie from "js-cookie";
import wxlogin from "vue-wxlogin";
export default {
  name: "Home",
  components: {
    wxlogin,
  },
  data() {
    return {
      isUpdate: false,
      show: false,
      form: {
        nickname: "",
        gender: "",
        age: "",
        phone: "",
        wechat: "",
        qq: "",
        address: "",
        email: "",
        createTime: "",
        role: "",
        status: "",
        questionnaireNum: 0,
      },
      wechatLoginInfo: {
        redirectUri: "",
        appid: "",
        scope: "",
        state: "",
      },
      rules: {
        phone: [
          {
            required: true,
            message: "Please input a phone number",
            trigger: "blur",
          },
          {
            required: true,
            pattern: /^1[3456789]\d{9}$/,
            message: "Cell phone number format error",
            trigger: "blur",
          },
        ],
        age: [
          {
            required: true,
            pattern: /(^([1-9]|[1-9]\d|100)$)|(^$)/,
            message: "Age can only be filled in between 1 and 100",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "Please input an email",
            trigger: "blur",
          },
          {
            required: true,
            pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/,
            message: "Mailbox format error",
            trigger: "blur",
          },
        ],
      },
    };
  },

  mounted() {
    this.getInformation();
  },
  created() {
    let query = this.$route.query;
    if (query.error != undefined) {
      this.$message({
        type: "warning",
        message: "The wechat has been bound",
      });
      let id = cookie.get("id");
      this.$router.push(`/systemManagement/personalInformation/${id}`);
    }
  },
  methods: {
    //获取个人信息
    getInformation() {
      let id = cookie.get("id");
      api
        .getUserInfo(id)
        .then((response) => {
          if (response.code == "200") {
            this.form = response.body;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    close() {
      this.getInformation();
      this.isUpdate = false;
    },
    returnTo() {
      this.$router.push("/home");
    },
    //扫码绑定微信
    bindwc() {
      this.show = true;
      this.getQrCode();
    },

    getQrCode() {
      api
        .getQrCode()
        .then((response) => {
          if (response.code == "200") {
            response.body.redirectUri = decodeURIComponent(
              response.body.redirectUri
            );
            this.wechatLoginInfo = response.body;
            console.log("djfndj");
            document.getElementById("wxLoginForm").style.display = "block";
          }
        })
        .catch((error) => {});
      this.loginStyle = 3;
    },

    confirmModify() {
      console.log(this.form);
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          api
            .updateUserInfo(this.form)
            .then((response) => {
              if (response.code == "200") {
                this.$message({
                  type: "success",
                  message: "information modify success!",
                });
                this.close();
              }
              if (response.code == "-201") {
                this.$message({
                  type: "error",
                  message: "duplicate mobile number!",
                });
              }
            })
            .catch((error) => {
              console.log(error);
            });
        }
        return false;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.box-card {
  width: 90%;
  background: rgba(148, 185, 228, 0.062);
  border-radius: 8px;
  margin: auto;
}

.box-card1 {
  background: rgba(148, 185, 228, 0.062);
  border-radius: 8px;
}

.card-header {
  color: #080808;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-card-title {
  width: 100%;
  font-size: 16px;
  font-weight: 600;
}

.el-card /deep/.el-card__header {
  background-color: #64bbe742;
  padding: 6px;
}

.my-label {
  background: #e1f3d8;
}
.box-card3 {
  width: 355px;
  background: #64bbe742;
  text-align: center;
  font-size: 25px;
  font-weight: 550;
  height: 70px;
}
.box-card2 {
  width: 355px;
  height: 334px;
}
</style>
